<template>
  <div class="less-styles">
    <t-dialog
      :visible="props.visible"
      header="图片设置"
      :confirm-on-enter="true"
      :on-close="closes"
      :on-confirm="onConfirmAnother"
    >
      <template #body>
        <div class="dia-body">
          <t-row :gutter="16">
            <t-col :span="12">
              <div class="row-left">
                <vueCropper
                  style="wdith: 100%; height: 300px"
                  ref="cropperRef"
                  :img="imgCode"
                  :info="true"
                  :infoTrue="options.infoTrue"
                  :auto-crop="options.autoCrop"
                  :fixed-box="options.fixedBox"
                  :fixedNumber="options.fixedNumber"
                  :fixed="options.fixed"
                  :centerBox="options.centerBox"
                  @realTime="realTime"
                >
                </vueCropper>
                <t-upload accept=".png,.jpg" style="margin-top: 10px" :max="1" :onSelectChange="onSelectChange">
                  <!-- cloud-upload -->
                  <t-button theme="default" variant="dashed">
                    <template #icon><t-icon name="cloud-upload"></t-icon></template>
                    重新选择</t-button
                  >
                  <p class="hw-box-msg">支持2M以内JPG、PNG图片</p>
                </t-upload>
              </div>
            </t-col>
            <!-- <t-col :span="4">
              <div class="look-img-box hw-box-style-flex hw-box-style-flex-clm">
                <img :src="imgCode" alt="" />
                <p>原图预览</p>
              </div>
            </t-col> -->
          </t-row>
        </div>
      </template>
      <template #footer>
        <footerBtn @btnOk="onConfirmAnother" @btnClose="closes" submitTitle="确定" closeTitle="取消" />
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import footerBtn from '@/components/footer/footerBtn.vue';
import VueCropper from 'vue-cropper/src/vue-cropper.vue';
import { defineComponent, reactive, Ref, ref, toRefs, UnwrapNestedRefs, watch } from 'vue';
interface Options {
  img: string | ArrayBuffer | null; // 裁剪图片的地址
  info: true; // 裁剪框的大小信息
  outputSize: number; // 裁剪生成图片的质量 [1至0.1]
  outputType: 'jpeg'; // 裁剪生成图片的格式
  canScale: boolean; // 图片是否允许滚轮缩放
  autoCrop: boolean; // 是否默认生成截图框
  autoCropWidth: number; // 默认生成截图框宽度
  autoCropHeight: number; // 默认生成截图框高度
  fixedBox: boolean; // 固定截图框大小 不允许改变
  fixed: boolean; // 是否开启截图框宽高固定比例
  fixedNumber: Array<number>; // 截图框的宽高比例  需要配合centerBox一起使用才能生效
  full: boolean; // 是否输出原图比例的截图
  canMoveBox: boolean; // 截图框能否拖动
  original: boolean; // 上传图片按照原始比例渲染
  centerBox: boolean; // 截图框是否被限制在图片里面
  infoTrue: boolean; // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
}
const options: UnwrapNestedRefs<Options> = reactive({
  img: '', // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 75, // 默认生成截图框的宽度
  autoCropHeight: 75, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 0.5, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'jpeg', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [4, 4], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
  full: true, // 是否输出原图比例的截图
  canMoveBox: false, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const cropperRef: Ref<any> = ref(null);
const previews: Ref<any> = ref(null);
const props = defineProps({
  visible: {
    type: Boolean,
  },
  imgCode: {
    type: String,
  },
});
const emit = defineEmits(['submit', 'close', 'setImg']);
const onConfirmAnother = () => {
  finish();
  //   visible.value = false;
};
const closes = (context) => {
  console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  emit('close', false);
};

const beforeUpload = (file) => {
  const reader = new FileReader();
  // 转化为base64
  reader.readAsDataURL(file);
  reader.onload = () => {
    // 获取到需要剪裁的图片 展示到剪裁框中
    options.img = reader.result;
  };
  return false;
};
const refreshCrop = () => {
  cropperRef.value.refresh();
};
// 上传图片（点击保存按钮）
const finish = (type?: any) => {
  console.log(cropperRef.value);
  cropperRef.value.getCropData((data) => {
    // console.log(data);
    // data为base64图片，供接口使用
    emit('submit', data);
  });
};
const onSelectChange = (e: any) => {
  console.log(e);
  if (e[0].type !== 'image/png' && e[0].type !== 'image/jpg' && e[0].type !== 'image/jpeg') {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (e[0].size / 1024 > 500) {
    MessagePlugin.error('上传大小超出500KB限制');
    return;
  }
  emit('setImg', e);
};
// 裁剪之后的数据
const realTime = (data) => {
  previews.value = data;
};
</script>

<style lang="less" scoped>
.less-styles {
}
.dia-body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.row-left {
  width: 100%;
  min-height: 320px;
}
.look-img-box {
  width: 100%;
  p {
    font-size: 12px;
    color: @color-text-color2;
    margin-top: 17px;
    text-align: center;
  }
}
:deep(.t-dialog) {
  width: 500px;
}
.hw-box-msg {
  font-family: PingFangSC-Regular, PingFang SC !important;
}
</style>
